<template>
    <div style="height: 100%">
        <el-container>
            <el-aside width="180px">
                <el-menu
                        :default-active="activePath"
                        style="height: 100%;"
                        :router="true"
                        class="el-menu-vertical-demo"
                        background-color="#303952"
                        text-color="#fff"
                        active-text-color="#cf6a87"
                        @select="handleSelect">
                    <div class="tx_box">
                        <img src="../../assets/img/touxiang.jpg" class="tx" alt="">
                        <p style="color: #f5dada">{{this.nickname}}</p>
                    </div>
                    <el-menu-item style="margin-top: 10px" index="Static"  @click="saveNavState('Static')">
                        <i class="el-icon-s-data"></i>
                        <span slot="title">数据分析</span>
                    </el-menu-item>
                    <el-menu-item index="Manage" @click="saveNavState('Manage')">
                        <i class="el-icon-user-solid"></i>
                        <span slot="title">人员管理</span>
                    </el-menu-item>
                    <el-submenu index="">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>管理设置</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="Type" @click="saveNavState('Type')">
                                <i class="el-icon-menu"></i>
                                <span slot="title">类型管理</span>
                            </el-menu-item>
                        </el-menu-item-group>
                        <!--                        <el-menu-item-group title="分组2">-->
                        <!--                            <el-menu-item index="1-3">选项3</el-menu-item>-->
                        <!--                        </el-menu-item-group>-->
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <span class="Stitle">摩尔贴帖后台管理系统</span>
                    <span style="float: right">
                        <el-button type="danger" plain @click="ToExit">登出</el-button>
                    </span>
                </el-header>
                    <el-main>
                        <!--        路由占位符-->
                        <router-view></router-view>
                    </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Main",
        data(){
            return{
                activePath: '',
                nickname: localStorage.getItem('nickname') ? localStorage.getItem('nickname') :'游客'
            }
        },
        created() {
            this.activePath = window.sessionStorage.getItem('activePath') ? window.sessionStorage.getItem('activePath') : 'Static'
        },
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            //    退出
            ToExit(){
                window.sessionStorage.clear()
                localStorage.clear()
                this.$router.push('/Login')
            },
            // 保存链接的激活状态
            saveNavState (activePath) {
                window.sessionStorage.setItem('activePath', activePath)
                this.activePath = window.sessionStorage.getItem('activePath')
                // console.log(this.activePath)
            },
        }
    }
</script>

<style scoped>
.el-header, .el-footer {
    background-color: #596275;
    color: #333;
    line-height: 36px;
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    /*text-align: center;*/
    /*line-height: 200px;*/
    min-height: 100vh;
}

.el-main {
    background-color: #faf1f4;
    color: #333;
    text-align: center;
    /*line-height: 160px;*/
}
.menu_item{
    padding-left: 0.5vw;
    width: 10vw;
    height: 6.48vh;
    line-height: 6.48vh;
}

body > .el-container {
    margin-bottom: 40px;
}
    .Stitle{
        color: #ea8685;
        font-size: 18px;
        font-family: 华文彩云;
    }
.tx{
    width: 50px;
    height: 50px;
    border-radius: 70px;
    transition: 0.5s;
}
.tx:hover {
    transform :rotate(360deg);
}
    .tx_box{
        height: 20vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
        cursor: pointer;
    }
</style>

<style lang="less" scoped>

</style>

